/*
  学习目标：组件复用逻辑的三种方式
  1. 👍自定义hooks
    优点: 
      1. 不会增加组件嵌套结构
      2. 实现简单
  2. 👎hoc
    缺点: 
      1. 增加组件嵌套结构, 不利于代码阅读
      2. 实现相对复杂
  3. 👎RenderProps
    缺点: 
      1. 增加组件嵌套结构, 不利于代码阅读
      2. 实现相对复杂
  
*/

import React, { useState } from 'react';
import useMouse from './05-复用逻辑-自定义hooks/hooks/useMouse';
import { logMouse } from './06-复用逻辑-hoc';

function LogMouse({ render }) {
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const handleMouseMove = (e) => {
    setMouse({ x: e.clientX, y: e.clientY });
  };
  const res = render({ mouse, handleMouseMove });
  return res;
}

const MyHeader = logMouse(Header);

export default function App() {
  return (
    <div>
      {/* 1. 自定义Hooks */}
      <Main />
      {/* 2. HOC */}
      <MyHeader />

      {/* 3. RenderProps */}
      <LogMouse render={(xxx) => <Footer {...xxx} />} />
    </div>
  );
}

function HeaderChild() {
  return <h2>HeaderChild</h2>;
}

const MyHeaderChild = logMouse(HeaderChild);

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>

      <MyHeaderChild />
    </div>
  );
}

function Main() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <div onMouseMove={handleMouseMove}>
      我是
      <h1>
        Main- x:{mouse.x} -y:{mouse.y}
      </h1>
    </div>
  );
}

function Footer({ mouse, handleMouseMove }) {
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x:{mouse.x} -y:{mouse.y}
    </h1>
  );
}
